<template>
	<view>
		<image class="bg" src="/static/index/collect_bg.jpg" mode="scaleToFill"></image>
		<hx-navbar title="绑定银行卡" :back="true" :fixed="false" color="#fff" barPlaceholder="hidden" transparent="auto">
		</hx-navbar>
		<view class="container">
			<view class="settings_item">
				<view class="settings_name">
					持卡人姓名
				</view>
				<input type="text" value="" placeholder-style="color:#9B9CA0" v-model="info.account_name" class="value"
					placeholder="请输入姓名" />
			</view>

			<view class="settings_item">
				<view class="settings_name">
					持卡人身份证
				</view>
				<input type="text" value="" placeholder-style="color:#9B9CA0" v-model="info.id_card" class="value"
					placeholder="请输入身份证" />
			</view>
			<view class="settings_item">
				<view class="settings_name">
					开户行
				</view>
				<input type="text" value="" placeholder-style="color:#9B9CA0" v-model="info.account_bank" class="value"
					placeholder="请输入开户行" />
			</view>
			<view class="settings_item">
				<view class="settings_name">
					银行卡号
				</view>
				<input type="text" value="" placeholder-style="color:#9B9CA0" v-model="info.card_number" class="value"
					style="width: 60%;" placeholder="请输入银行卡号" />
			</view>
		</view>

		<view class="bottom_box">
			<view class="submit_btn" @click="submit()">
				<text>
					立即提交
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					id: '',
					account_bank: '',
					account_name: '',
					card_number: '',
					id_card: '',
					card_type: '',
					bank_code: '',
					is_default: '',
					bank_logo: '',
					card_number_i: '',
					card_type_i: '',
					mobile: ''
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			if (this.id) {
				this.$api.getBankInfo({
					id: this.id
				}, res => {
					if (res.status) {
						this.info = res.data;
					}
				})
			}
		},
		methods: {
			submit: function() {
				if (this.id) {
					this.$api.editBankInfo(this.info, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, res => {
								uni.navigateBack({})
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})

				} else {
					//添加
					this.$api.addBankCard(this.info, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, res => {
								uni.navigateBack({})
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})

				}
			}
		}
	}
</script>

<style>
	@import url('/pages/user/settings/settings.css');
</style>
<style>
	.settings_name {
		width: 250rpx;
	}
</style>
